<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<h:head></h:head> 
<body> 
<h:form id="form">
             
    <p:dataList value="#{tableBean.cars}" var="car" id="cars"
        paginator="true" rows="5"
        paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="5,10,15" type="none">
 
            <f:facet name="header">
                Cars
            </f:facet>
 
            <p:commandButton icon="ui-icon-search" update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
            </p:commandButton>
 
            <h:outputText value="#{car.manufacturer}, #{car.year}" style="margin-left:10px" />
            <br />
    </p:dataList>
     
    <p:dialog header="Car Detail" widgetVar="carDialog" modal="true" showEffect="fade">
        <p:outputPanel id="carDetail" style="text-align:center;" layout="block">
         
            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
             
            <h:panelGrid  columns="2" cellpadding="5">
                <h:outputLabel for="modelNo" value="Model No: " />
                <h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
                 
                <h:outputLabel for="year" value="Year: " />
                <h:outputText id="year" value="#{tableBean.selectedCar.year}" />
                 
                <h:outputLabel for="color" value="Color: " />
                <h:outputText id="color" value="#{tableBean.selectedCar.color}" style="color:#{tableBean.selectedCar.color}"/>
            </h:panelGrid>
        </p:outputPanel>
    </p:dialog>
 
</h:form>
                  
</body> 
</html>
